<div class="page-wrapper d-flex flex-column pt-4 w-100">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Listing
                    </div>
                    <h3 class="page-title">
                        All Templates
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body d-flex flex-row-reverse">

        <aside class="bd-sidebar sub-sidebar" ng-if="folderType">

            <nav class="bd-links p-3" aria-label="Sub-section navigation">
                <div class="card">
                    <div class="card-body">
                        <div class="input-group w-100 mb-3">
                            <a href="/portal/template/list/{{themeId}}" class="col btn btn-primary text-white px-3">
                                <i class="fas fa-reply"></i> Back
                            </a>
                            <a href="/portal/template/create/{{themeId}}/{{folderType}}"
                                class="col btn btn-primary text-white px-3">
                                <i class="fas fa-plus"></i> Add
                            </a>
                        </div>
                        <filter-list request="request" hide-status="'true'" callback="getList(pageIndex)"></filter-list>
                    </div>
                </div>
            </nav>
        </aside>

        <!-- ----------------------------------------------------------- -->

        <div class="content-body py-3 pe-3">

            <section ng-init="loadParams()" class="card mb-5">
                <div class="card-body">
                    <!-- <div ng-if="folderType">
                <div class="row mb-3">
                    <div class="col-12">
                        <filter-list request="request" hide-status="'true'" callback="getList(pageIndex)"></filter-list>
                    </div>
                </div>

                <div class="row">
                    <div class="col-6 text-left">
                        <a href="/portal/template/list/{{themeId}}" class="btn btn-sm btn-primary px-3">
                            <i class="fas fa-reply"></i> Back
                        </a>
                    </div>
                    <div class="col-6 text-end">
                        <a href="/portal/template/create/{{themeId}}/{{folderType}}"
                            class="btn btn-sm btn-primary px-3">
                            <i class="fas fa-plus"></i> Add
                        </a>
                    </div>
                </div>

                <hr>
            </div> -->
                    <!-- 
    <div class="card-header">
        <div class="row" ng-if="folderType">
            <div class="col-md-8">
                <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
                    <div class="btn-group me-2">
                        <a href="/portal/template/create/{{themeId}}/{{folderType}}" class="btn btn-secondary">
                            <i class="fas fa-plus"></i>
                        </a>
                    </div>
                    <div class="btn-group me-2">
                        <a href="/portal/template/list/{{themeId}}" class="btn btn-secondary">
                            <i class="fas fa-reply"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
            </div>
            <filter-list request="request" callback="getList(pageIndex)"></filter-list>
        </div>
    </div> -->
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-hover" cellspacing="0">
                                <thead class="thead-light">
                                    <tr>
                                        <th scope="col" class="col">Template Name</th>
                                        <th scope="col" class="col">Folder path</th>
                                        <th scope="col" class="col">Created Date</th>
                                        <th scope="col" class="col"></th>
                                    </tr>
                                </thead>

                                <tbody class="sortable" ng-init="getList()">
                                    <tr ng-if="!folderType" ng-repeat="d in folderTypes track by $index">
                                        <td class="text-primary">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                class="icon icon-tabler icon-tabler-folder me-2" width="25" height="25"
                                                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none"
                                                stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                <path
                                                    d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2" />
                                            </svg>
                                            <a ng-click="loadFolder(d)" class="btn text-primary fw-bold"
                                                ng-bind="d"></a>
                                        </td>
                                        <td colspan="3"></td>
                                    </tr>
                                    <tr ng-if="folderType" ng-repeat="item in data.items track by $index"
                                        class="sortable-item" sort-model="template" sort-model-id="{{item.id}}">
                                        <td>
                                            {{item.fileName}}
                                        </td>
                                        <td>
                                            <div class="input-group input-group-sm">
                                                <input id="path-modal-{{$index}}" value="{{item.fileFolder}}"
                                                    onclick="this.select()" class="form-control form-control-sm"
                                                    readonly="readonly" />
                                            </div>
                                        </td>
                                        <td>
                                            <small ng-bind="item.createdDateTime | utcToLocal"
                                                class="text-black-50"></small>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm btn-group-sm float-end" role="group"
                                                aria-label="Actions">
                                                <a href="/portal/template/details/{{themeId}}/{{folderType}}/{{item.id}}"
                                                    class="btn btn-link">
                                                    <span class="fas fa-pen text-primary"></span>
                                                </a>
                                                <a class="btn btn-link" ng-click="copy(item.id)">
                                                    <span class="fas fa-copy text-primary"></span>
                                                </a>
                                                <a ng-click="remove(item.id);" class="btn btn-link">
                                                    <span class="fas fa-trash-alt text-danger"></span>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                        ul-class="pagination justify-content-end m-0" a-class="page-link"
                        paging-action="getList(page-1)" scroll-top="true"></paging>
                </div>
            </section>
        </div>

    </div>
</div>